<template>
  <app-provider>
    <row class="wrapper" :class="!isMobile?'':'full is-mobile'">
      <row-item class="wrapper-left">
        <user-avatar></user-avatar>
        <tab></tab>
      </row-item>
      <row-item class="wrapper-right" flex>
        <router-view class="wrapper-view"/>
      </row-item>
    </row>
  </app-provider>
</template>
<script>
import { defineComponent, provide } from 'vue'
import { useDevice } from '@/hook/useDevice'
import { PRE_FIX_CLASS } from '@/setting/app'
import AppProvider from '@/components/Base/AppProvider/AppProvider.vue'
import Tab from '@/components/tab/tab.vue'
import UserAvatar from '@/components/userAvatar/userAvatar.vue'
import storage from 'good-storage'
import { USER_KEY } from '@/assets/js/constant'
export default defineComponent({
  components: {
    AppProvider,
    Tab,
    UserAvatar
  },
  setup() {
    const { isMobileRef } = useDevice()
    provide('isMobile', isMobileRef)
    provide('prefixCls', PRE_FIX_CLASS)
    storage.session.set(USER_KEY, { userId: 1 })
    return {
      isMobile: isMobileRef
    }
  }
})
</script>
<style lang="scss" scope="this api replaced by slot-scope in 2.5.0+">
html, body, #app {
  width: 100%;
  height: 100%;
}
.row.wrapper {
  position: relative;
  background-color: #fff;
  left: 50%;
  width: 768px;
  top: 50%;
  height: 80%;
  border: 1px solid #f8f8f8;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.row.wrapper.full {
  height: 100%;
  width: 100%;
}
.wrapper-left {
  background-color: $color-background;
  border-right: 1px solid $color-highlight-background;
  width: 65px;
}
.wrapper-right {
  background-color: #fff;
}
.wrapper-view {
  height: 100%;
}
</style>
